<template>
	<view class="content">
		<view class="hbanner" >
			 <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="hbanner_img" :src="'http://139.196.137.75' + item.img" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		 <view class="area_content">
		 	<view class="area"  @tap="toHouse">
		 		<image class="htype_list_img" src="../../static/img/house_icon.png" mode=""></image>
		 		<text class="htype_list_text">房屋租赁</text>
		 	</view>
		 	<view class="area1" @click="toJobHunting">
		 		<image class="htype_list_img" src="../../static/img/job_icon.png" mode=""></image>
		 		<text class="htype_list_text">招聘求职</text>	
		 	</view>
		 </view>
	</view>
</template>

<script>
	var _self,timer = null;
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				bannerList: [],
				houseList:[],
				highlightAll: [],
				latitude: '',
				longitude: '',
				pageNum: 1
			}
		},
		onShow() {
			this.getBanner()
		},
		methods: {
			//获取亮点
			getSelect(type){
				let that = this;
				that.$api.request('/api/dict/data/list','',{
					dictType: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.highlightAll = res.rows
					
				})
			},
			toJobHunting(){
				uni.navigateTo({
					url: '../jobHunting/jobHunting'
				})
			},
			toHouse(){
				uni.navigateTo({
					url: '../home/home'
				})
			},
			// 轮播图
			getBanner(){
				let that = this;
				that.$api.request('/system/webImg/list','',{}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.bannerList = res.rows
				})
			},
		}
	}
</script>

<style lang="scss">
	.area_content{
		margin: 0 auto;
		height: calc(100vh - 400rpx);
		position: fixed;
		top: 400rpx;
		left: 0;
		width: 100vw;
	}
	.area{
		width: 95%;
		background: rgba(#ffffff,0.8);
		height: 200rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 450rpx;
		left: 2.5%;
	}
	.area1{
		width: 95%;
		background: rgba(#ffffff,0.8);
		height: 200rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 680rpx;
		left: 2.5%;
	}
	.htype_list_img{
		width: 100rpx;
		height: 100rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.htype_list_text{
		color: #000000;
		font-weight: bold;
		font-size: 36rpx;
	}
	.area_content::before{
		content:"";
		background-image:url("https://zlzfcloud.xyz/profile/upload/2021-07-05 11:14:59/29fc9c0e-c7cd-4cf8-b9a4-de297410b6fb.jpg");
		background-size: 100% 100%;
		opacity:0.7;//透明度设置
		position:absolute;
		top: 0;
		left:0;
		width: 100%;
		height: calc(100vh - 400rpx);
		z-index:-1;
	}
	.content{
		.search{
			width: 96%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;
			padding-top: 20rpx;
			.search_input{
				width: calc(100% - 110rpx);
				height: 60rpx;
				background: #E9ECEF;
				border-radius: 60rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
			}
			.search_text{
				color: #707171;
				font-size: 32rpx;
			}
		}
		.hbanner{
			width: 100%;
			height: 400rpx;
			margin: 0 auto;
			position: fixed;
			left: 0;
			top: 0;
			.swiper{
				width: 100%;
				height: 100%;
				.hbanner_img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.htype{
			width: 96%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.htype_list{
				width: 25%;
				text-align: center;
				margin-bottom: 20rpx;
				
			}
		}
		.hsort{
			width: 96%;
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.hsort_inner{
				width: 32%;
				display: flex;
				align-items: center;
				justify-content: center;
				.hsort_inner_text{
					color: #BFBFC0;
					font-size: 32rpx;
					display: block;
				}
				.hsort_inner_icon{
					width: 30rpx;
					height: 30rpx;
					margin-left: 10rpx;
				}
			}
		}
		.hlist{
			width: 96%;
			margin: 0 auto;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 0;
			.hlist_img{
				width: 200rpx;
				height: 150rpx;
				border-radius: 10rpx;
				margin-left: 20rpx;
			}
			.hlist_right{
				margin-left: 20rpx;
				width: calc(100% - 230rpx);
				.hlist_title{
					font-size: 32rpx;
					color: #333333;
					margin-top: 20rpx;
				}
				.hlist_position{
					font-size: 28rpx;
					color: #CACACA;
					margin-top: 10rpx;
				}
				.hlist_tag{
					width: 100%;
					display: flex;
					align-items: center;
					.hlist_tag_inner{
						background: #F2F2F2;
						padding: 5rpx 20rpx;
						font-size: 28rpx;
						color: #C9C8C9;
						border-radius: 10rpx;
						margin-right: 20rpx;
					}
				}
				.hlist_price{
					font-size: 36rpx;
					color: red;
					margin-top: 20rpx;
				}
			}
		}
	}
	
	
</style>
